<template>
  <div class="double-column">
    <section class="left-box">
      <el-card style="box-shadow: none">
        <template #header>
          <div class="card-header">
            <span>应用配置</span>
            <span>
              <el-button size="small" icon="Close" @click="handleRemoveMoney">回收钱包租金</el-button>
              <el-button size="small" icon="FolderChecked" @click="handleSaveSetting">保存应用配置</el-button>
            </span>
          </div>
        </template>
        <el-form :modal="formData" size="small">
          <el-form-item label="内外盘-运行状态">
            <div class="form-item-box">
              <el-switch v-model="formData.isInner" active-text="开" inactive-text="关"></el-switch>
              <el-switch style="margin-left: 20px" 
                v-model="formData.isOuter" active-text="开" inactive-text="关"></el-switch>
            </div>
          </el-form-item>
          <el-form-item label="持仓跟单/同一代币购买次数">
            <div class="form-item-box">
              <el-switch v-model="formData.isPosition" active-text="开" inactive-text="关"></el-switch>
              <el-select style="width: 80px; margin-left: 20px;"></el-select>
            </div>
          </el-form-item>
          <el-form-item label="过滤CA/代币名称最大长度">
            <div class="form-item-box">
              <el-switch v-model="formData.isPosition" active-text="开" inactive-text="关"></el-switch>
              <el-input style="width: 80px; margin-left: 20px;"></el-input>
            </div>
          </el-form-item>
          <el-form-item label="跟单账号-备注">
            <div class="form-item-box">
              <el-input style="width: 200px;" v-model="formData.remark"></el-input>
            </div>
          </el-form-item>
          <el-form-item label="跟单账号-共密钥">
            <div class="form-item-box">
              <el-input style="width: 90px;" v-model="formData.key1"></el-input>
              <el-input style="width: 90px; margin-left: 20px;" v-model="formData.key2"></el-input>
            </div>
          </el-form-item>
          <el-form-item label="内外盘-余额停跟">
            <div class="form-item-box">
              <el-input style="width: 90px;" v-model="formData.balance1"></el-input>
              <el-input style="width: 90px; margin-left: 20px;" v-model="formData.balance2"></el-input>
            </div>
          </el-form-item>
          <el-form-item label="前10持仓(%)">
            <div class="form-item-box">
              <el-input style="width: 200px;" v-model="formData.balance3"></el-input>
            </div>
          </el-form-item>
          <el-form-item label="外盘开盘-停卖秒数(s)">
            <div class="form-item-box">
              <el-input style="width: 200px;" v-model="formData.balance4"></el-input>
            </div>
          </el-form-item>
          <el-form-item label="Dev跟卖%-清仓率/卖出">
            <div class="form-item-box">
              <el-input style="width: 200px;" v-model="formData.balance4"></el-input>
            </div>
          </el-form-item>
          <el-form-item label="Dev-累计买入金额区间">
            <div class="form-item-box">
              <el-input style="width: 90px;" v-model="formData.balance1"></el-input>
              <el-input style="width: 90px; margin-left: 20px;" v-model="formData.balance2"></el-input>
            </div>
          </el-form-item>
          <el-form-item label="DevChiang比例区间%">
            <div class="form-item-box">
              <el-input style="width: 90px;" v-model="formData.balance1"></el-input>
              <el-input style="width: 90px; margin-left: 20px;" v-model="formData.balance2"></el-input>
            </div>
          </el-form-item>
          <el-form-item label="地址黑名单" >
            <div class="form-item-bottom-box">
              <el-input type="textarea" v-model="formData.balance3"></el-input>
            </div>
          </el-form-item>
          <el-form-item label="代币黑名单" >
            <div class="form-item-bottom-box">
              <el-input type="textarea" v-model="formData.balance3"></el-input>
            </div>
          </el-form-item>
        </el-form>
      </el-card>
    </section>
    <section class="right-box">
      <page-table ref="pageTableRef" :listApi="getStudentList" 
        :showCheckbox="true" :columns="columns" :searchInitParam="searchParam">
        <template #operation>
          <el-button link icon="Edit" type="primary" @click="onEdit">编辑</el-button>
          <el-button link icon="Delete" type="danger" @click="onDelete">删除</el-button>
        </template>
      </page-table>
    </section>
  </div>
</template>

<script lang="jsx" setup name="company">
import { ElMessage } from 'element-plus'
import { getStudentList } from '@/api/page'

const searchParam = reactive({
  keyword: ''
})

const formData = reactive({
  
})

const columns = computed(() => [
  {
    label: '钱包信息',
    prop: 'name',
    width: 130,
    align: 'center'
  },
  {
    label: '通用配置',
    prop: 'idCard',
    width: 130,
    align: 'center'
  },
  {
    label: '止盈区间',
    prop: 'major',
    width: 130,
    align: 'center'
  },
  {
    label: '止损区间',
    prop: 'major',
    width: 130,
    align: 'center'
  },
  {
    label: '内盘买入配置',
    prop: 'major',
    width: 130,
    align: 'center'
  },
  {
    label: '外盘买入配置',
    prop: 'major',
    width: 130,
    align: 'center'
  },
  {
    label: '内盘滑点市场',
    prop: 'major',
    width: 130,
    align: 'center'
  },
  {
    label: '外盘滑点市场',
    prop:'major',
    width: 130,
    align: 'center'
  },
  {
    label: '内盘卖出配置',
    prop: 'major',
    minWidth: 170,
    align: 'center'
  },
  {
    label: '外盘卖出配置',
    prop: 'major',
    minWidth: 170,
    align: 'center'
  },
  {
    label: '状态',
    prop: 'major',
    align: 'center'
  },
  {
    label: '操作',
    prop: 'operation',
    align: 'center',
    fixed: 'right',
    width: 120
  },
  {
    label: '钱包备注',
    hidden: true,
    search: { el: 'input', props: { clearable: true } }
  }
])

const detailDialogRef = ref(null)
const checkStudentDetail = (type, row) => {
  detailDialogRef.value?.openDialog(type, row)
}

// 刷新列表
const pageTableRef = ref(null)
const handleRefresh = () => {
  pageTableRef.value?.handleRefresh()
}

// 删除
const onDelete = () => {
  ElMessage({ message: '删除成功', type: 'success' })
}

// 编辑
const onEdit = () => {
  ElMessage({ message: '编辑成功', type:'success' })
}

// 回收钱包租金
const handleRemoveMoney = () => {
  ElMessage({ message: '回收钱包租金成功', type:'success' })
}

// 保存应用配置
const handleSaveSetting = () => {
  ElMessage({ message: '保存应用配置成功', type:'success' })
}
</script>

<style scoped lang="scss">
.double-column {
  padding: 20px; 
  clear: both; 
  width: 100%;

  .left-box {
    width: calc(25% - 20px); 
    min-width: 380px;
    float: left; 
    margin-right: 20px;

    .card-header {
      width: 100%;
      padding-bottom: 8px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .form-item-box {
      width: 100%;
      text-align: right;
    }

    .form-item-bottom-box {
      width: 100%;
      text-align: left;
    }
  }

  .right-box {
    width: 75%;
    max-width: calc(100% - 400px);
    float: left;
  }
}
</style>
